<template>
  <div>
    <a-table :dataSource="dataSource" :columns="columns" />
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, reactive, ref, toRefs } from "vue";
import type { LowCodeImp } from "@/components/low-code/core/type";

export default defineComponent({
  name: "tableWidget",
  props: ["element"],
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const { element } = toRefs(props);

    const columns = reactive(element.value.componentProps.columns);

    const dataSource = ref(element.value.componentProps.tableData);
    lowCode.tableController.dataSource.set(
      element.value.selector,dataSource
    );
    const customColumnsRenders = lowCode.tableController.getColumns();
    if (customColumnsRenders?.has(element.value.selector)) {
      let columnsMap = customColumnsRenders.get(element.value.selector);
      columns.forEach((item: any) => {
        if (columnsMap?.has(item.dataIndex)) {
          Object.assign(item, { customRender: columnsMap.get(item.dataIndex) });
        }
      });
    }

    return {
      element,
      columns,
      dataSource,
    };
  },
});
</script>

<style scoped>
::v-deep .el-table__empty-block {
  height: 300px !important;
}
</style>
